<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sccketIoClient</title>
</head>
<body>
<h1>Socket.io</h1>
<div id="chatroot" style="width: 400px;height: 300px;overflow: auto;border: 1px solid blue"></div>
<input type="text" name="sayinput" id="sayinput" value="">
<input type="button" name="send" id="sendbutton" value="发送">
<script src="./socket.io.js" type="text/javascript"></script>
<script>
    var iosocket = null;
    window.onload = function () {
        iosocket = io.connect('http://localhost:9000');
        iosocket.on('connect', function () {
            iosocket.send('hello, from ioclient');
        })
        iosocket.on('message', function (message) {
            var chatroot = document.getElementById('chatroot');
            chatroot.innerHTML += message + '<br/>';
        })
        iosocket.on('disconnect', function () {
            console.log('服务器关闭');
        })
        function send() {
            var sayinput = document.getElementById('sayinput');
            iosocket.send(sayinput.value);
            sayinput.value = '';
        }
        document.onkeyup = function (event) {
            if (event.keyCode === 13) {
                send();
            }
        }
        var sendbutton = document.getElementById('sendbutton');
        sendbutton.onclick = function () {
            send();
        }
    }
</script>
</body>
</html>